<script setup name="myabsent">
import OAPageHeader from '@/components/OAPageHeader.vue';
import { ref, reactive, onMounted, computed,watch } from "vue";
import absentHttp from '@/api/absentHttp';
import {  ElMessage } from 'element-plus';
import timeFormatter from '@/utils/timeFormatter';
import OAMain from '@/components/OAMain.vue';
import OAPagination from '@/components/OAPagination.vue';
import OADialog from '@/components/OADialog.vue';




let rules = reactive({
    title: [
        { required: true, message: "请输入标题！", trigger: 'blur' }
    ],
    absent_type_id: [
        { required: true, message: "请输入选择类型！", trigger: 'change' }
    ],
    date_range: [
        { required: true, message: "请输入请假时间！", trigger: 'blur' }
    ],
    requests_content: [
        { required: true, message: "请输入请假理由！", trigger: 'blur' }
    ],
})
let absentFormREF = ref()
let dialogFormVisible = ref(false)
let formLabelWidth = "100px"
let absentForm = reactive({
    title: '',
    absent_type_id: null,
    date_range: [],
    requests_content: ""
})
let absents = ref([])
let absent_type = ref([])
let responder = reactive({
    email: "",
    realname: ""
})

let pagination = reactive({
    total:0,
    page:1
})


const onShowDialgo = () => {
    console.log("打开对话框的方法被触发了");
    absentForm.title = "",
    absentForm.absent_type_id = null,
    absentForm.date_range = []
    absentForm.requests_content = ""
    dialogFormVisible.value = true
}

const onSubmitAbsent = () => {
    absentFormREF.value.validate(async (valid, fileds) => {
        if (valid) {
            let data = {
                title: absentForm.title,
                absent_type_id: absentForm.absent_type_id,
                start_date: absentForm.date_range[0],
                end_date: absentForm.date_range[1],
                requests_content: absentForm.requests_content

            }
            console.log("------------");
            console.log(data);
            ElMessage.success("提交成功")

            try {
                let absent = await absentHttp.applyAbsent(data)
                //console.log(absent)
                //ElMessage.success("提交成功")
                // 将表单数据假如的 列表中 实现无感刷新
                absents.value.unshift(absent)
                dialogFormVisible.value = false;
            } catch (detail) {
                ElMessage.error(detail)
            }

        }
    })

}

const requestAbsent = async(page) =>{
    try{
        let absents_data = await absentHttp.getMyAbsents(value)
        let total = absents_data.count;
        pagination.total = total
        let results = absents_data.results
        absents.value = results
    }catch(detail){
        ElMessage.error(detail)
    }
}

// 监听 page 只要 page 的值发生变化 就向服务器要数据
watch(()=>pagination.page,(value)=>{
    requestAbsent(value)
})

// 组件加载完成后 获取 
onMounted(async () => {
    try { 
        // 1、获取请假类型
        let absent_type_data = await absentHttp.getAbsentTypes()
        absent_type.value = absent_type_data
        // 2、获取审批人
        let responder_data = await absentHttp.getResponder()
        Object.assign(responder, responder_data)

        // 3、获取个人考勤列表
        let absents_data = await absentHttp.getMyAbsents()
        let total = absents_data.count;
        pagination.total = total
        let results = absents_data.results
        absents.value = results
        console.log(absents_data)
    } catch (detail) {
        ElMessage.error(detail)
    }
})

// 获取审批人
let responder_str = computed(() => {
    if (responder.email) {
        return '[ ' + responder.email + ' ]' + responder.realname
    } else {
        return "无"
    }
})

</script>

<template>
    <OAMain title="个人考勤">
        <el-card style="text-align: right;">
            <el-button type="primary" @click="onShowDialgo"><el-icon>
                    <Plus />
                </el-icon>发起考勤</el-button>
        </el-card>
        <el-card>
            <el-table :data="absents" style="width: 100%">
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="absent_type.name" label="类型" />
                <el-table-column prop="requests_content" label="原因" />
                <el-table-column label="发起时间">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                    </template>
                </el-table-column>
                <el-table-column label="开始时间">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDateTime(scope.row.start_date) }}
                    </template>
                </el-table-column>
                <el-table-column label="结束时间">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDateTime(scope.row.end_date) }}
                    </template>
                </el-table-column>
                <el-table-column label="审核领导">
                    {{ responder_str }}
                </el-table-column>
                <el-table-column prop="response_content" label="反馈意见" />
                <el-table-column label="审核状态">
                    <template #default="scope">
                        <el-tag tyep="info" v-if="scope.row.status == 1">审核中</el-tag>
                        <el-tag tyep="success" v-else-if="scope.row.status == 2">已通过</el-tag>
                        <el-tag tyep="danger" v-else="scope.row.status==1">未通过</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <!-- <el-pagination background layout="prev, pager, next" :total="pagination.total" :page-size="1" v-model:current-page="pagination.page"/> -->
                 <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
            </template>
        </el-card>
    </OAMain>
 
    <OADialog v-model="dialogFormVisible" title="发起请假" @submit="onSubmitAbsent">
        <el-form :model="absentForm" :rules="rules" ref="absentFormREF">
            <el-form-item label="填写标题" :label-width="formLabelWidth" prop="title">
                <el-input v-model="absentForm.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="请假类型" :label-width="formLabelWidth" prop="absent_type_id">
                <el-select v-model="absentForm.absent_type_id" placeholder="请选择请假类型">
                    <el-option v-for="item in absent_type" :label="item.name" :value="item.id" :key="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="请假时间" :label-width="formLabelWidth" prop="date_range">
                <el-date-picker v-model="absentForm.date_range" type="datetimerange" range-separator="到"
                    start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="审批领导" :label-width="formLabelWidth">
                <el-input :value="responder_str" readonly disable autocomplete="off" />
            </el-form-item>
            <el-form-item label="请假缘由" :label-width="formLabelWidth" prop="requests_content">
                <el-input tyep="textarea" v-model="absentForm.requests_content" autocomplete="off" />
            </el-form-item>
        </el-form>
    </OADialog>



</template>

<style scoped>

</style>